<script setup>
import Footer from '@/views/Layout/Footer.vue'
</script>

<template>
  <RouterView v-slot="{ Component }">
    <transition name="fade">
      <component :is="Component" />
    </transition>
  </RouterView>
  <Footer />
</template>

<style>
.fade-enter-from {
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
}

.fade-enter-to {
  transform: translate3d(0, 0, 0);
}

.fade-leave-from {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}

.fade-leave-to {
  transform: translate3d(100%, 0, 0);
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter-active {
  transition-delay: 0.3s;
}
</style>
